<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TodoList Jquery</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div id="app">
  <input id="input" type="text"/>
  <button id="btn">提交</button>
  <ul id="list"></ul>
</div>
<script>
function Page(){}
$.extend(Page.prototype,{
    init:function(){
        this.bindEvents()
    },
    bindEvents:function(){
        var btn=$('#btn');
        btn.on('click',$.proxy(this.handleBtnClick,this))
    },
    handleBtnClick:function(){
      var inputElem=$("#input");
      var inputValue=inputElem.val();
      var ulElem=$("#list");
      ulElem.append('<li>'+inputValue+'</li>');
      inputElem.val('');
//      alert('123')
    }
});
    var page=new Page();
    page.init();
</script>
</body>
</html>
